import {
  createRouter,
  createWebHistory
} from 'vue-router'
// 导入进度条
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

import Layout from '@/layout/Layout'


// 定义路由规则
// 如果定义了路由，但是发现结果是没有引用到这个路由，除了百度搜索到的结果之外，还有可能是Layout.vue里面少写了<router-view/>引起的
const routes = [{
    path: '/',
    redirect: '/home',
  },
  {
    path: '/home',
    // component: () => import('@/layout/Layout.vue'),
    component: Layout,
    icon: "odometer",
    meta: {
      title: "概要",
      requireAuth: false
    },
    children: [{
      path: '/home',
      name: '概要',
      component: () => import('@/views/home/Home.vue'),
      icon: "odometer",
      meta: {
        title: "概要",
        requireAuth: false
      }
    }, ]
  },
  // {
  //   path: '/workflow',
  //   component: Layout,
  //   icon: "VideoPlay",
  //   children: [
  //     {
  //       path: "/workflow",
  //       name: "工作流",
  //       icon: "VideoPlay",
  //       meta: {title: "工作流",requireAuth: false},
  //       component: () => import('@/views/workflow/Workflow.vue')
  //     }
  //   ]
  // },
  {
    path: "/cluster",
    name: "集群",
    component: Layout,
    icon: "platform",
    meta: {title: "集群", requireAuth: true},
    children: [
      {
        path: "/cluster/node",
        name: "Node",
        icon: "platform",
        meta: {title: "Node", requireAuth: true},
        component: () => import("@/views/node/Node.vue")
      },
      {
        path: "/cluster/namespace",
        name: "Namespace",
        icon: "el-icon-document-add",
        meta: {title: "Namespace", requireAuth: true},
        component: () => import("@/views/namespace/Namespace.vue")
      },
    ]
  },
  {
    path: "/workload",
    name: "工作负载",
    component: Layout,
    icon: "menu",
    meta: {
      title: "工作负载",
      requireAuth: false
    },
    children: [
      {
        path: "/workload/deployment",
        name: "Deployment",
        icon: "el-icon-s-data",
        meta: {
          title: "Deployment",
          requireAuth: false
        },
        component: () => import("@/views/deployment/Deployment.vue")
      },
      {
        path: "/workload/pod",
        name: "Pod",
        icon: "el-icon-document-add",
        meta: {
          title: "Pod",
          requireAuth: false
        },
        component: () => import("@/views/pod/Pod.vue")
      }
    ]
  },
  {
    path: "/loadbalance",
    name: "负载均衡",
    component: Layout,
    icon: "files",
    meta: {title: "负载均衡", requireAuth: true},
    children: [
      {
        path: "/loadbalance/service",
        name: "Service",
        icon: "el-icon-s-data",
        meta: {title: "Service", requireAuth: true},
        component: () => import("@/views/service/Service.vue")
      },
      {
        path: "/loadbalance/ingress",
        name: "Ingress",
        icon: "el-icon-document-add",
        meta: {title: "Ingress", requireAuth: true},
        component: () => import("@/views/ingress/Ingress.vue")
    }
    ]
  },
  {
    path: "/components",
    name: "通用组件库",
    icon: "menu",
    component: Layout,
    meta: {
      title: "通用组件库",
      requireAuth: false
    },
    children: [{
        path: "/components/image-lazy",
        name: "图片懒加载",
        icon: "menu",
        component: () => import("@/views/imageLazy/imageLazy.vue"),
        meta: {
          title: "图片懒加载",
          requireAuth: false
        },
      }, {
        path: "/components/loadList",
        name: "分页加载",
        icon: "el-icon-document-add",
        meta: {
          title: "分页加载",
          requireAuth: false
        },
        component: () => import("@/views/imageLazy/imageLazy.vue"),

      }

    ]
  },
  {
    path: '/404',
    component: () => import('@/views/common/404.vue'),
    meta: {
      title: '404',
      requireAuth: false
    }
  },
  {
    path: '/403',
    component: () => import('@/views/common/403.vue'),
    meta: {
      title: '403',
      requireAuth: false
    }
  },
  {
    path: '/:pathMatch(.*)',
    redirect: '/404',
  }
]

//创建路由实例
const router = createRouter({
  history: createWebHistory(),
  routes
})

// 进度条配置
NProgress.inc(100) //设置进度条递增
NProgress.configure({
  easing: 'ease',
  speed: 600,
  showSpinner: false
}) // 动画效果，动画速度，进度环是否显示

//路由守卫，路由拦截
router.beforeEach((to, from, next) => {
  // 启动进度条
  NProgress.start()
  //设置头部
  if (to.meta.title) {
    document.title = to.meta.title
  } else {
    document.title = "Kubernetes"
  }
  // 放行
  next()
})

// 关闭进度条
router.afterEach(() => {
  NProgress.done()
})



// 抛出路由实例，在main.js中引用
export default router